<template>
  <!-- 测试发布 -->
  <div class="container">
    <el-form label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="能力服务名称：">
            <span>{{ formData.serviceName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请求方式：">
            <span>{{ formData.httpRequestMethod }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="能力服务编码：">
            <span>{{ formData.serviceCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务URL：">
            <span>{{ formData.mockUrl }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      style="margin: 10px 0"
      row-key="nodeId"
      default-expand-all
      :data="fbOptions.csfbTableData"
    >
      <!-- <el-table-column label="序号" type="index" /> -->
      <el-table-column
        label="参数名"
        prop="nodeName"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          <div style="display: inline-block">
            <span>{{ scope.row.nodeName }}</span>
            <el-tag size="mini" v-if="scope.row.isAttr === 'Y'">属性</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="描述"
        prop="nodeLabel"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column label="参数类型" prop="nodeType" width="140">
        <template #default="scope">
          <span>{{ selectDictLabel(fbOptions.keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否必须"
        prop="nodeNeededable"
        width="80"
        align="center"
      >
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeNeededable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="是否必填"
        prop="nodeValueable"
        width="80"
        align="center"
      >
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeValueable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="校验规则"
        prop="nodeCheckRegex"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column label="测试值" prop="test" min-width="100">
        <template #default="scope">
          <el-input v-model="scope.row.test"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button type="primary" style="margin-top: 20px">发送请求</el-button> -->
    <el-input
      type="textarea"
      :rows="2"
      placeholder="运行结果"
      style="margin-top: 20px"
    >
    </el-input>
  </div>
</template>

<script>
import {getCsfbData} from "@slc/api/slc/inventory";

export default {
  name: "step-csfb",
  props: {
    formData: {
      type: Object,
      default: () => {
      }
    },
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  computed: {
  },
  async activated() {
    console.log(this.formData)
    const res = await getCsfbData({serviceVerId: this.formData.serviceVerId});
    const {data = {}} = res
    const {connServiceParamInList = []} = data
    console.log('测试/发布', data, connServiceParamInList);
    this.fbOptions.formData = {...this.formData, ...data};
    this.fbOptions.csfbTableData = connServiceParamInList;

  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 16px;
}
</style>
